<template>
  <div>
    <!-- 搜索 -->
    <form action="/">
      <Search
        show-action
        placeholder="请输入搜索关键词"
        v-model="search_val"
        @search="keyupEnter"
        @update:model-value="SearchInput"
        @cancel="cancel"
        @clear="search_val = ''"
      />
    </form>
    <div v-show="search_val.length > 0" class="search_real">
      <div class="search_real_one">
        <img :src="album.imgPath && ''" alt="" />
        <div class="xinxi">
          <p
            style="
              width: 100px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              height: 25px;
            "
          >
            <a style="">{{ album.keyword }}</a>
          </p>
          <!-- <br /> -->
          <p>
            <span>有声书</span>
            <img src="@/assets/images/search/耳机.svg" alt="" />
            <span>3.32亿</span>
            <img src="@/assets/images/search/声音.svg" alt="" />
            <span>1777集</span>
          </p>
        </div>
        <img
          src="@/assets/images/search/播放.svg"
          class="search_real_bofang"
          alt=""
        />
      </div>
      <div style="margin-top: 70px">
        <p
          v-for="queryres in queryResultList"
          :key="queryres.id"
          style="font-size: 16px"
        >
          <em> {{ queryres.keyword }}</em>
        </p>
      </div>
    </div>
    <!-- 搜索历史 -->
    <div class="search_history" v-show="showTab == 0">
      <div class="header">
        <span>搜索历史</span>
        <Icon
          name="delete"
          size="18px"
          class="history_icon_clear"
          @click="resetHistory()"
        />
      </div>
      <div class="history_list">
        <span v-for="history in historyRecord" :key="history">{{
          history
        }}</span>
      </div>
    </div>

    <!-- tab标签 -->
    <Tabs
      :animated="true"
      v-model:active="activeName"
      title-active-color="#F06742"
      color="#F06742"
      @click="getCategory2List(activeName)"
      v-show="queryResultList.length == 0"
    >
      <Tab
        v-for="category in categoryList"
        :key="category.categoryId"
        :title="category.categoryName"
        :name="category.categoryId"
      >
        <List finished-text="没有更多了">
          <!-- <Cell
          v-for="category2 in Category2List"
          :key="category2.id"
          :title="category2.display_word"
          value="111"
          right-icon="arrow-up"
          label-class="cccc"
        >
        </Cell> -->
          <ul class="category2List">
            <li v-for="(category2, index) in Category2List" :key="index">
              <span
                :class="{
                  hotTopOne: index == 0,
                  hotTopTwo: index == 1,
                  hotTopThree: index == 2,
                }"
                >{{ index + 1 }}</span
              >
              <a style="font-size: 16px !important">{{
                category2.display_word
              }}</a>
              <Icon
                v-if="category2.shift == 1"
                name="arrow-up"
                color="#ff2929"
                class="category2_icon"
              />
              <Icon
                v-else
                name="arrow-down"
                color="#95CD4B"
                class="category2_icon"
              />
            </li>
          </ul>
        </List>
      </Tab>
    </Tabs>
    <div class="mark">
      <p>打开喜马拉雅App</p>
      <p>可查看完整热搜榜</p>
    </div>
    <div class="footer">
      <img
        src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp"
        alt=""
      />
      <div class="content">
        <div class="logo">
          <img
            src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
            alt=""
          />
        </div>
        <p>© 2014-2023 喜马拉雅 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "Search",
  });
</script>

<script lang="ts" setup>
  // 引入
  import { onMounted, ref, defineEmits } from "vue";
  import {
    getHotCategoryApi,
    getHotCategory2Api,
    getRealSearchApi,
  } from "@/api/search";
  import { Button, Search, Tab, Tabs, List, Cell, Icon } from "vant";
  import { CategoryListModel } from "@/api/model/searchModel";
  import { useRouter } from "vue-router";

  // 自定义事件
  const emits = defineEmits<{
    (event: "cancel"): void;
  }>();
  // 路由-router
  const router = useRouter();

  // 返回
  const cancel = () => {
    emits("cancel");
    queryResultList.value = [];
    showTab.value = 0;
  };

  // 定义一个用于收集实时的album数据
  const album = ref<any>({});

  // 定义一个用于收集实时的queryResult数据
  const queryResultList = ref([]);

  // 实时搜索事件
  const SearchInput = async () => {
    console.log(111);
    if (search_val.value == "") {
      queryResultList.value = [];
    }
    const result = await getRealSearchApi(search_val.value);
    album.value = result.data.data.result.albumResultList[0];
    queryResultList.value = result.data.data.result.queryResultList;
    console.log(queryResultList.value);
    showTab.value = queryResultList.value.length;
  };

  // 用来保存搜索的历史记录
  const historyRecord = ref(["111"]);
  console.log(historyRecord.value);
  // 搜索事件
  const keyupEnter = () => {
    console.log(historyRecord.value);
    historyRecord.value.unshift(search_val.value);
    // search_val.value = '';
    console.log(historyRecord.value);

    window.localStorage.setItem(
      "historyRecord",
      JSON.stringify(historyRecord.value)
    );
    var arr = window.localStorage.getItem("historyRecord");
    arr = JSON.parse(arr as string);
    historyRecord.value = arr as any;
    console.log(historyRecord.value);
    // console.log(JSON.stringify(historyRecord.value));
  };

  // 清除搜索记录
  const resetHistory = () => {
    console.log(1111);
    historyRecord.value = [];
    console.log(historyRecord.value);
    window.localStorage.setItem("historyRecord", JSON.stringify([]));
  };

  // 用来存储输入框的值
  const search_val = ref("");

  // 用来存储tab的传值
  const activeName = ref(0);

  // 二级分类的数据
  const Category2List = ref([]);

  const showTab = ref(0);
  console.log(showTab);

  // 请求二级分类的数据列表
  const getCategory2List = async (id: number) => {
    console.log(id);
    // console.log(111);
    const result = await getHotCategory2Api(id, 20);
    // console.log(result.data.hotWordResultList);
    Category2List.value = result.data.hotWordResultList;
  };

  // 一级分类的数据列表
  const categoryList = ref<CategoryListModel>([]);

  // 请求一级分类列表的数据
  const getHotCategory = async () => {
    // isShowCategory2ListLoading.value = true;
    const result = await getHotCategoryApi();
    console.log(result);
    categoryList.value = result.data.category;
    getCategory2List(1);

    // console.log(categoryList.value);
    // isShowCategory2ListLoading.value = false;
  };
  // const history_Arr = ref([]);

  onMounted(() => {
    console.log(Category2List.value);
    getHotCategory();
    var arr = window.localStorage.getItem("historyRecord");
    arr = JSON.parse(arr as string);
    console.log(arr, "111");
    if (arr == null) {
      console.log("null");
    } else {
      console.log("!null");
      historyRecord.value = arr as any;
      console.log(historyRecord.value);
    }
    // if(arr.length==0)
    // console.log(arr);
  });
</script>

<style lang="scss" scoped>
  .category2List {
    width: 100vw;
  }
  .category2List li {
    position: relative;
    height: 45px;
    padding-left: 30px;
    line-height: 45px;
    border-bottom: 0.5px solid #ccc;
  }
  .category2List li span {
    box-sizing: border-box;
    display: inline-block;
    // padding-top: 5px;
    font-size: 20px;
    color: #f2e8e0;
  }
  .category2List li a {
    margin-left: 20px;
  }
  .category2List li .hotTopOne {
    font-weight: bold;
    color: #ff2929;
  }
  .category2List li .hotTopTwo {
    font-weight: bold;
    color: #f97253;
  }
  .category2List li .hotTopThree {
    font-weight: bold;
    color: #f8a642;
  }
  .category2_icon {
    position: absolute;
    top: 10px;
    right: 30px;
  }
  .mark {
    padding-top: 46px;
    width: 100vw;
    height: 175px;
    background: #4c4c4c;
    box-sizing: border-box;
  }
  .mark p {
    margin-top: 10px;
    text-align: center;
    color: white;
    font-size: 14px;
  }
  .footer {
    position: relative;
    width: 375px;
    height: 181px;
  }
  .footer img {
    width: 100vw;
    height: 181px;
  }
  .content {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .content p {
    font-size: 12px;
    color: #808080;
  }
  .footer .logo {
    margin-top: 34px;
    // float: left;
  }
  .footer .logo img {
    // float: left;
    width: 102px;
    height: 36px;
  }
  .search_history {
    width: 100vw;
    // height: 100px;
    // background: yellow;
  }
  .search_history .header {
    position: relative;
    padding-left: 20px;
    // padding-top: 10px;
    width: 100%;
    height: 34px;
  }
  .search_history .header span {
    font-size: 14px;
  }
  .history_icon_clear {
    position: absolute;
    top: 2px;
    right: 45px;
  }
  .history_list {
    white-space: normal;
    width: 100%;
  }
  .history_list span {
    display: inline-block;
    margin-top: 13px;
    margin-left: 14px;
    border-radius: 5px;
    padding: 10px;
    background: #f3f4f5;
    font-size: 14px;
  }
  .search_real {
    width: 100vw;
    height: 100%;
    padding: 15px 0px;
  }
  .search_real .search_real_one {
    padding-left: 20px;
  }
  .search_real .search_real_one .xinxi {
    margin-left: 10px;
    float: left;
  }
  .search_real .search_real_one .xinxi p {
    font-size: 14px;
    margin: 0;
    padding: 0px;
    height: 15px;
  }
  .search_real .search_real_one .xinxi p:nth-child(2) {
    border: 0.5px solid white;
    height: 20px;
    line-height: 20px;
    color: #a3a3ac;
    margin-top: 8px;
    font-size: 9px;
  }
  .search_real .search_real_one .xinxi p:nth-child(2) img {
    // border: 0.5px solid white;
    margin-left: 10px;
    // margin-top: 2px;
    width: 14px;
    float: none;
    height: 14px;
  }
  .search_real .search_real_one .xinxi p:nth-child(2) span:nth-child(1) {
    padding: 2px;
    border: 1px solid #a3a3ac;
    border-radius: 4px;
  }
  .search_real .search_real_one .xinxi p:nth-child(2) span:nth-child(2) {
    margin-left: 10px;
    // padding: 3px;
    font-size: 12px;
  }

  .search_real .search_real_one .xinxi p:nth-child(2) span:nth-child(3) {
    margin-left: 10px;
    // padding: 3px;
    font-size: 12px;
  }
  .search_real .search_real_one img {
    float: left;
    width: 40px;
    height: 40px;
  }

  .search_real .search_real_one .xinxi p:nth-child(2) img {
    float: none;
  }
  .search_real .search_real_bofang {
    width: 25px !important;
    height: 25px;
    margin-left: 100px;
  }
  .search_real p {
    line-height: 30px !important;
    padding-left: 20px;
    height: 30px;
    // float: left;
    border-bottom: 1px solid #ccc;
  }
  .van-search {
    width: 360px;
  }
</style>
